<template>
  <div class="box">
    <my-form @form="form" :formList="data.form"></my-form>
    <my-list :list="data.list" @del="del" @edit="edit"></my-list>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from "vue";

import myForm from "./components/form";
import myList from "./components/list";
const data = reactive({
  list: [],
  form: {
    name: "",
    tel: "",
    id: "",
    flag: true,
  },
});
//子传父添加
function form(e) {
  if (data.form.flag == true) {
    data.list.push({
      ...data.form,
      id: new Date().getTime(),
      time: new Date().toLocaleString(),
    });
  }else {
    //编辑
    data.list.forEach((item)=>{
        if(item.id==data.form.id) {
            item.name=data.form.name
            item.tel=data.form.tel
            
            //清空判断编辑添加的状态
            data.form.flag=true
        }
    })
  }
  // console.log(data.list);
}
//删除
function del(index) {
  data.list.splice(index, 1);
}
//回填
function edit(info) {
  console.log(info);
  data.form.name = info.name;
  data.form.tel = info.tel;
  data.form.id = info.id;
  data.form.flag = false;
  // console.log(data.form);
}
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  margin: auto;
}
</style>